<template>
    <el-row style="height: 100%;display: flex;
  justify-content: center;
  align-items: center;">
        <div v-if="!article">
            <div v-for="i in 5" :key="i">
                <el-skeleton style="--el-skeleton-circle-size: 100px">
                </el-skeleton>
            </div>
        </div>
        <div v-for="i in article" :key="i.id" @click="jump(i.id)"
            style="width: 20%;margin-right: 25px;margin-top: 0px;cursor: pointer;height: 400px;">
            <el-card :body-style="{ padding: '0px' }" style="height: 100%;">
                <el-image style="width: 100%; height: 200px" :src="i.face" :fit="cover" />
                <div class="title">
                    {{ i.title }}
                </div>
                <div style="padding: 14px">
                    <div v-html="i.content.replace(/<\/?[^>]*>|(\n|\t|\r)|(\s)/g, '')" class="intr">
                    </div>
                </div>
            </el-card>
        </div>
    </el-row>
</template>

<script>
import router from '@/router'
export default {
    name: "photoHomeShowComponents3Class.vue",
    props: {
        article: {
            type: Object,
        },
    },
    setup() {
        let jump = (i) => {
            router.push({ name: 'article', query: { id: i } });
        }

        return {
            jump,
        }
    }
}

</script>

<style scoped>
.title {
    text-align: center;
    font-weight: 800;
    font-size: larger;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
}

.title:hover {
    color: red;
}

.intr {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
}
</style>